<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
        }
    </style>

</head>

<body>
    <svg id="wave" width="100vw" height="100vh" xmlns="http://www.w3.org/2000/svg">
    </svg>
    <script>
        const svg = document.getElementById('wave');
        const { width, height } = svg.getBoundingClientRect()
        console.log("rect", width, height)

        let points = [];
        let offset = 0;

        // 创建路径元素
        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        path.setAttribute('stroke', '#3498db');
        path.setAttribute('fill', 'none');
        path.setAttribute('stroke-width', '3');
        svg.appendChild(path);

        function generateWave() {
            points = [];
            //将宽度分开20个点
            const segmentWidth = width / 20;

            for (let i = 0; i <= 20; i++) {
                //递增
                const x = i * segmentWidth;
                //使用sin来绘制y方向的曲线
                console.log("offset", offset)
                //i会变化，不断的增加，来定位不同x的y的位置
                const y = height / 2 + Math.sin(i * 0.5 + offset) * 40;
                // console.log("y", y)
                points.push([x, y]);
            }

            let d = `M ${points[0][0]} ${points[0][1]}`;
            for (let i = 1; i < points.length; i++) {
                //    M = moveto 移动到某点。
                //     L = lineto 画一条直线到某点。
                //     H = horizontal lineto 画一条水平线到某点。
                //     V = vertical lineto 画一条垂直线到某点。
                //     Q = quadratic Bézier curveto 二次贝塞尔曲线
                //     T = smooth quadratic Bézier curveto 平滑二次贝塞尔曲线
                //     C = curveto 三次贝塞尔曲线
                //     S = smooth curveto 平滑三次贝塞尔曲线
                //     A = elliptical Arc 弧形
                //     Z = closepath 从结束点到开始点画一条直线，形成一个闭合的区域。
                d += ` L ${points[i][0]} ${points[i][1]}`;
            }

            path.setAttribute('d', d);
            offset += 0.1;
            requestAnimationFrame(generateWave);
        }

        generateWave();
    </script>
</body>

</html>